﻿<div class="modal fade" id="addSkillDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Add Skill Detail</h4>
                </div>
                <div class="modal-body no-padding">
                    <form id="addSkillDetailForm" class="smart-form">
                        <input type="hidden" name="SkillId" class="SkillId" />
                        <fieldset>
                            <section>
                                <label class="label">Detail Name</label>
                                <label class="input">
                                    <input type="text" maxlength="50" name="SkillChildName">
                                </label>
                                <div class="note">
                                    <strong>Maxlength</strong> 50 characters.
                                </div>
                            </section>
                            <section>
                                <label class="label">Level Templet</label>
                                <label class="input">
                                    <input type="text" maxlength="50" name="LevelId">
                                </label>
                                <div class="note">
                                    <strong>A Level Group</strong>, such as 【best good bad】,【Lv3 Lv2 Lv1 NA】,【skilled stranger】
                                </div>
                            </section>
                            <section>
                                <label class="label">Detail Description</label>
                                <label class="textarea">
                                    <textarea rows="3" name="SkillChildDescription"></textarea>
                                </label>
                                <div class="note">
                                    <strong>Note:</strong> This paragraph will be displayed below the detail name.
                                </div>
                            </section>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" data-dismiss="modal" id="addSkillDetailFormSubmit">
                        Submit
                    </button>
                </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<article class="col-lg-12">
    <div class="jarviswidget" id="wid-id-editskill-editskill-3">
        <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>Edit Skill Details</h2>
            <div class="widget-toolbar">
                <i class="fa fa-refresh" id="tableRefresh"></i>
            </div>
            <div class="widget-toolbar">
                <i class="fa fa-plus" data-toggle="modal" data-target="#addSkillDetailModal"></i>
            </div>
        </header>
        <div>
            <div class="widget-body  no-padding">
                <div>
                    <div id="toolbar"></div>
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</article>
<article class="col-md-12 col-lg-6">
    <div class="jarviswidget" id="wid-id-editskill-editskill-0">
        <header>
            <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>
            <h2>Edit Skill</h2>
        </header>
        <div>
            <div class="widget-body no-padding">
                <form class="smart-form" id="editSkillForm">
                    <input type="hidden" name="SkillId" class="SkillId" />
                    <input type="hidden" maxlength="50" name="SkillParentId" class="SkillParentId">
                    <fieldset>
                        <section>
                            <label class="label">Skill Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillName" class="SkillName">

                            </label>
                            <!--<div class="note">
                                <strong>Maxlength</strong> 50 characters.
                            </div>-->
                        </section>

                        <section>
                            <label class="label">Skill Description</label>
                            <label class="textarea">
                                <textarea rows="3" name="SkillDescription" class="SkillDescription"></textarea>
                            </label>
                            <!--<div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the skill name.
                            </div>-->
                        </section>
                    </fieldset>

                    <footer>
                        <button class="btn btn-primary" id="editSkillFormSubmit">
                            Submit
                        </button>
                    </footer>
                </form>
            </div>
        </div>
    </div>
</article>
<article class="col-md-12 col-lg-6">
    <div class="jarviswidget" id="wid-id-editskill-editskill-1">
        <header>
            <span class="widget-icon"> <i class="fa fa-list-alt"></i> </span>
            <h2>Skill Operations</h2>
        </header>
        <div>
            <div class="widget-body">
                <input type="hidden" name="SkillId" class="SkillId" />
                <fieldset>
                    <form class="form-horizontal" id="moveSkillForm">
                        <div class="form-group">
                            <label class="" for="moveSkillSelect">Move skill to</label>
                            <div>
                                <div class="col-xs-8 no-padding pull-left">
                                    <select class="form-control" id="moveSkillSelect"></select>
                                </div>
                                <div class="col-xs-4 pull-right">
                                    <button class="btn btn-primary btn-block" id="moveSkillFormSubmit">
                                        Move
                                    </button>
                                </div>
                            </div>

                        </div>
                    </form>
                    <form class="form-horizontal" id="operateSkillParentForm">
                        <div class="form-group">
                            <label class="" for="copySkillSelect">Copy skill to &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<strong>With/Without</strong> skill detail)</label>
                            <div>
                                <div class="col-xs-8 no-padding input-group pull-left">
                                    <select class="form-control" id="copySkillSelect"></select>
                                    <span class="input-group-addon">
                                        <span class="onoffswitch">
                                            <input type="checkbox" name="start_interval" class="onoffswitch-checkbox" id="st3">
                                            <label class="onoffswitch-label" for="st3">
                                                <span class="onoffswitch-inner" data-swchon-text="with" data-swchoff-text="whitout"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </span>
                                    </span>

                                </div>
                                <div class="col-xs-4 pull-right">
                                    <button class="btn btn-primary btn-block" id="moveSkillFormSubmit">
                                        Copy
                                    </button>
                                </div>
                            </div>

                        </div>
                    </form>
                    <form class="form-horizontal" id="operateSkillParentForm">
                        <div class="form-group">
                            <label class="" for="select-1">Remove skill</label>
                            <div>
                                <div class="col-xs-8 no-padding input-group pull-left remove-confirm">
                                    <span class="input-group-addon">
                                        <span class="checkbox">
                                            <label>
                                                <input type="checkbox" class="checkbox style-0">
                                                <span></span>
                                            </label>
                                        </span>
                                    </span>
                                    <input class="form-control " type="text" value="I know this is a dangerous operation." disabled>
                                </div>
                                <div class="col-xs-4 pull-right">
                                    <button class="btn btn-primary btn-block" id="moveSkillFormSubmit">
                                        Remove
                                    </button>
                                </div>
                            </div>

                        </div>
                    </form>
                </fieldset>

            </div>
        </div>
    </div>
</article>
<script>

    $("#wid-id-editskill-editskill-3").on('click', '.deleteBtn', function (e) {
        var id = e.currentTarget.dataset.id;
        $.SmartMessageBox({
            title: 'Are you sure you want to delete it?',
            content: "This row will be removed",
            buttons: '[Remove][Cancel]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Remove") {
                $.ajax({
                    type: "post",
                    url: apiUrl + "Skill/DeleteSkillDetail",
                    data: { skillDetailId:id },
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.status.code == 0) {
                            $("#table").bootstrapTable('refresh');
                            $.smallBox({
                                title: "Skill Detail has been removed",
                                content: "<i class='fa fa-clock-o'></i> <i>If you want to cancel, please contact the system administrator.</i>",
                                color: "#659265",
                                iconSmall: "fa fa-check fa-2x fadeInRight animated",
                                timeout: 8000
                            });
                        } else {
                            alert(data.status.msg);
                        }
                    },
                    error: function () {
                        alert("Error! Check network!");

                    }
                })
                //lineInfo.lStation.splice(tempStations, 1);
                //reloadLine();

            }
            //tempStations = null;
        });
    })

    $("#tableRefresh").click(function () {
        $("#table").bootstrapTable('refresh');
    })
    if ($(window).width() > 1200) {
        $("#wid-id-editskill-editskill-2 fieldset").height(Math.max($(window).height() - 260, 338));
    }
    $("#editSkillFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/EditSkill",
            data: $("#editSkillForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    reflashSkill();
                    $.smallBox({
                        title: "Success",
                        content: "<i class='fa fa-clock-o'></i> <i></i>Skill group has been changed",
                        color: "#659265",
                        iconSmall: "fa fa-check fa-2x fadeInRight animated",
                        timeout: 8000
                    });
                } else {
                    alert(data.status.msg);
                }
            }
        });
        return false;
    });

    $("#addSkillDetailFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/AddSkillDetail",
            data: $("#addSkillDetailForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    $("#table").bootstrapTable('refresh');
                    $("#addSkillDetailModal").modal('hide');
                    $.smallBox({
                        title: "Success",
                        content: "<i class='fa fa-clock-o'></i> <i></i>Skill Detail has been inserted",
                        color: "#659265",
                        iconSmall: "fa fa-check fa-2x fadeInRight animated",
                        timeout: 8000
                    });
                } else {
                    alert(data.status.msg);
                }
            }
        });
        return false;
    });

    (function runOperationsFrom() {
        var move = "";
        for (var parentId in skillObj.skillGroup) {
            move += "<option " + (skillObj.groupId == parentId ? "selected='slected' " : "") + "> " + skillObj.skillGroup[parentId].skillParentName + "</li>";
        }
        $("#moveSkillSelect").append(move);
        $("#copySkillSelect").append(move);

    })();




    function userLevelfilter() {
        var temp = ["All"];
        for (var i = 1; i < userinfo.userLevels.length; i++)
            temp.push(userinfo.userLevels[i]);
        console.log(temp);
        return temp;
    }

    function Rolefilter() {
        var temp = [{
            "text": "All",
            "id": "-",
            "element": "HTMLOptionElement",
            children: [{ "text": "All", id: "-" }]
        }];
        $(userinfo.role).each(function (i, role) {
            var ch = [{ id: "", text: role.roleName }];
            var id = [];
            $(role.roleChilds).each(function (index, child) {
                id.push(child.roleChildId);
                ch.push({ id: child.roleChildId, text: role.roleName + " " + child.roleChildName });
            });
            ch[0].id = id.join("-");
            temp.push({
                text: role.roleName,
                id: "group-" + id.join("-"),
                "element": "HTMLOptionElement",
                children: ch
            })
        });
        console.log(temp);
        return temp;
    }
    loadTable();

    function loadTable() {
        try {
            if (userinfo == null) throw 'err';
            var options = {
                ajax: function (request) {
                    console.log(request);
                    $.ajax({
                        type: "post",
                        url: apiUrl + "Skill/GetSkillDetails",
                        data: { skillId: skillObj.skillId },
                        dataType: 'json',
                        success: function (data, status, request) {
                            $('#table').bootstrapTable('load', data.result);
                            $('#table').bootstrapTable('hideLoading');
                        },
                        error: function () {


                        }
                    });
                },
                columns: [{
                    field: "skillChildId",
                    title: "ID",
                    visible: false
                }, {
                    field: "skillChildName",
                    title: "Name",
                    editable: true,
                    /*formatter: clipFormatter,*/
                }, {
                    field: "skillChildDescription",
                    title: "Description",
                    editable: true,
                }, {
                    field: "levelId",
                    title: "LevelGroup",
                    editable: true,
                    /*editable: {
                        type: 'select',
                        title: 'Level',
                        source: function () { var temp = []; for (var i = 1; i < userinfo.userLevels.length; i++)temp.push({ value: i, text: userinfo.userLevels[i] }); return temp; }
                    },*/
                }, {
                    field: "operations",
                    title: "Operations",
                    filter: {
                        type: "input"
                    },
                    cardVisible: false,
                    sortable: false,
                    visible: true,
                    formatter: passwordFormatter,
                }],
                height: Math.max($(window).height() - 165, 338),
                filter: false,
                pagination: true,
                showColumns: false,
                striped: false,
                pageSize: 15,
                paginationDetailHAlign: "left",
                paginationHAlign: "right",
                smartDisplay: false,
                showFullscreen: false,
                pageList: [5, 10, 15, 20, 30, 50, "ALL"],
                clickToSelect: false,
                showRefresh: false,
                showToggle: false,
                sortable: false,
                showExport: false,
                showMultiSort: false,
                toolbar: "#toolbar",
                classes: "table table-no-bordered",
                responseHandler: function (res) {
                    console.log(res);

                    return res;
                },
                onEditableSave: function (field, row, oldValue, $el) {
                    $.ajax({
                        type: "post",
                        url: apiUrl + "/Skill/EditSkillDetail",
                        data: row,
                        dataType: 'JSON',
                        success: function (data) {
                            if (data.status.code == 0) {
                                //swal("已保存", "", "success");
                                $(".editable-unsaved").removeClass("editable-unsaved");
                                $.smallBox({
                                    title: "Success",
                                    content: "<i class='fa fa-clock-o'></i> <i></i>Data had been updated",
                                    color: "#659265",
                                    iconSmall: "fa fa-check fa-2x fadeInRight animated",
                                    timeout: 8000
                                });
                            }
                        },
                        error: function () {
                            alert("网络异常或失败");
                        }
                    });
                }
            };
            if ($(window).width() < 400) {
                options.cardView = true;
                options.pageSize = 3;
            } else {

            }
            $("#table").bootstrapTable(options)
            setTimeout(function () {
                //$('.fixed-table-container').css("max-height", "" + ($(window).height() - $('.fixed-table-container').position().top - 100) + "px")
                //$('.fixed-table-container').css("overflow-y", "auto")
                $(".fixed-table-toolbar").addClass("panel-heading");
            }, 1000);
        }
        catch (e) {
            setTimeout(function () {
                loadTable();
            }, 1000);
            console.log(e);
        }
    }

    function timeFormatter(value, row, index) {
        var res = '';
        if (value == 0) {
            res = '不存在记录';
        } else {
            if (Date.parse(new Date()) / 1000 - value < 60) {
                res = "1分钟内";
            } else {
                if (Date.parse(new Date()) / 1000 - value < 3600) {
                    res = Math.round((Date.parse(new Date()) / 1000 - value) / 60) + "分钟前";
                } else {
                    if (new Date(new Date().setHours(0, 0, 0, 0)) / 1000 < value) {
                        res = new Date(value * 1000).format("hh:mm");
                    } else {
                        res = new Date(value * 1000).format("yy-MM-dd hh:mm");
                    }
                }
            }

        }
        return res;
    }

    function passwordFormatter(value, row, index) {
        return '<span class="label label-warning deleteBtn" data-id="'+ row.skillChildId +'"><i class="fa fa-unlink"> Delete</span>';
    }

    function clipFormatter(value, row, index) {
        if (value == null) return null;
        return '<span class="needCopy" data-clipboard-text="' + value + '"><a>' + value + '</a> <i class="fa fa-copy "></i>';
    }


</script>